<template>
    <div>
        <component :is="currentComponent" ></component>
    </div>
</template>

<script>
    import MyButtonFrame from "../common/MyButtonFrame";
    import Category from "./category/Category";
    import Link from "./link/Link";
    export default {
        name: "Collection",
        components: {MyButtonFrame, Category, Link},
        created() {
            this.getCurrentComponent();
        },
        data() {
            return {
                currentComponent: 'Category'
            }
        },
        methods: {
            getCurrentComponent() {
                let cid = this.$route.query.cid;
                if (cid === undefined) {
                    this.currentComponent = 'Category';
                } else {
                    this.currentComponent = 'Link';
                }
            }
        },
        watch: {
            $route: function () { // 根据路由判断组件
                this.getCurrentComponent();
            }
        }
    }
</script>

<style scoped>

</style>